<template>
  <div class="background-container">
      <div ref="graphContainer" id="graph-container" class="kg_content_kg"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
import { ref, onMounted, watch, computed, onBeforeUnmount } from 'vue';
import customNodeImage from '@/assets/query/node.png';

export default {
  props: ['shareData'],
  setup(props) {
    const graph = ref(null);
    const rawData = ref(props.shareData ? props.shareData.response : null);
    const graphContainer = ref(null);

    const transformedData = computed(() => {
      const graphData = { nodes: [], edges: [] };
      if (rawData.value) {
        console.log("progress data", rawData.value);
        rawData.value.forEach(item => {
          const parentName = item["n.name"];
          const childName = item["m.name"];
          const relType = item["rel_type"];

          if (!graphData.nodes.find(node => node.id === parentName)) {
            graphData.nodes.push({ id: parentName, label: parentName });
          }
          if (!graphData.nodes.find(node => node.id === childName)) {
            graphData.nodes.push({ id: childName, label: childName });
          }

          graphData.edges.push({
            source: parentName,
            target: childName,
            label: relType
          });
        });
      }
      return graphData;
    });

    const handleResize = () => {
      if (graph.value && graphContainer.value) {
        graph.value.changeSize(graphContainer.value.offsetWidth, graphContainer.value.offsetHeight);
      }
    };

    const updateGraph = () => {
      if (graph.value) {
        console.log('data', transformedData.value);
        graph.value.data({
          nodes: transformedData.value.nodes,
          edges: transformedData.value.edges
        });
        graph.value.render();
      }
    };

    onMounted(() => {
      if (graphContainer.value) {
        graph.value = new G6.Graph({
          container: graphContainer.value,
          width: graphContainer.value.offsetWidth,
          height: graphContainer.value.offsetHeight,
          linkCenter: true,
          animate: true,
          animateCfg: {
            duration: 1000,
            easing: 'easeSinIn',
          },
          modes: {
            default: [
              'drag-canvas',
              'zoom-canvas',
              'drag-node'
            ],
          },
          defaultNode: {
            type: 'image',
            size: [60,60],
            img: customNodeImage,
            labelCfg: {
              style: {
                fill: '#000',
                fontSize: 14
              },
              position: 'bottom'
            }
          },
          defaultEdge: {
            style: {
               endArrow: true, 
             
            }
          },
          layout: {
            type: 'force',
            center: [graphContainer.value.offsetWidth / 2, graphContainer.value.offsetHeight / 2], // 布局中心
            preventOverlap: true,
            nodeSpacing: 50,
          },
        });

        window.addEventListener('resize', handleResize);
        updateGraph();
      }
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
      if (graph.value) {
        graph.value.destroy();
      }
    });

    watch(() => props.shareData, (newVal) => {
      console.log("receive data", newVal);
      rawData.value = newVal ? newVal.response : null;
      updateGraph();
    }, { immediate: true, deep: true });

    return {
      graphContainer
    };
  }
};
</script>

<style scoped>
.background-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url('../../assets/query/res.png');
  background-attachment: fixed;
  background-size: 100vw, 100vh;
  background-position: center;
  background-repeat: no-repeat;
}

#graph-container {

  width: 100%;
  height: 100vh;
}
</style>